<template>
	<view class="detail">
		<goodsnavbar @NavBarIndex="NavBarIndex" class="goodsnavbar" ref="goodsnavbar"></goodsnavbar> 
		<scroll-view class="scrollview" scroll-y="true" @scroll="scrollY" scroll-with-animation="true" :scroll-top="scrollTop" @scrolltolower="scrollBottom"> 
			<goodsswiper v-bind:goodsbanner="topImages"></goodsswiper>
			<detailbaseinfo v-bind:goods="goods"></detailbaseinfo>
			<detailshopinfo v-bind:shop="shop"></detailshopinfo>
			<detailgoodsinfo v-bind:detailInfo="detailInfo" @goodsinfoimage="goodsinfoimage"></detailgoodsinfo>
			<detailparaminfo ref="detailparaminfo" v-bind:paramInfo="goodsParam"></detailparaminfo>
			<detailcommentinfo ref="detailcommentinfo" v-bind:commentInfo="commentInfo"></detailcommentinfo>
			<goodslist ref="goodslist" v-bind:goodsdata="detailRecommend"></goodslist>
		</scroll-view>
		<detailbottombar @addShopping="addCar"></detailbottombar>
		<backtop @tap="goTop" v-show="backTopShow"></backtop>
	</view>
</template>

<script>
	import goodsnavbar from './DetailComps/GoodsNavBar.vue'
	import goodsswiper from './DetailComps/GoodsSwiper.vue'
	
	import detailbaseinfo from './DetailComps/DetailBaseInfo.vue'
	import detailshopinfo from './DetailComps/DetailShopInfo.vue'
	import detailgoodsinfo from './DetailComps/DetailGoodsInfo.vue'
	import detailparaminfo from './DetailComps/DetailParamInfo.vue'
	import detailcommentinfo from './DetailComps/DetailCommentInfo.vue'
	import detailbottombar from './DetailComps/DetailBottomBar.vue'
	
	import goodslist from '../../components/content/goods/GoodsList.vue'
	
	import backtop from '../../components/common/backtop/BackTop.vue'
	
	import {Goods,Shop,GoodsParam} from './DetailClass/DetailClass.js'
	
	import { mapActions } from "vuex"
	export default {
		components:{
			goodsnavbar,goodsswiper,detailbaseinfo,detailshopinfo,detailgoodsinfo,detailparaminfo,detailcommentinfo,detailbottombar,
			goodslist,
			backtop
		},
		data() {
			return {
				topImages:[],
				goods:{},
				shop:{},
				detailInfo:{},
				goodsParam:{},
				commentInfo:{},
				detailRecommend:[],
				backTopShow:false,
				scrollTop:0,
				old:{
					scrollTop:0
				},
				positionTop:[],
				iid:''
			}
		},
		methods: {
			...mapActions(['addCart']),
			addCar(){
				const product={}
				product.image=this.topImages[0]
				product.title=this.goods.title
				product.desc=this.detailInfo.desc
				product.price=this.goods.realPrice
				product.iid=this.iid
				this.addCart(product).then(res=>{
					uni.showToast({
						title: '添加购物车成功',
						duration: 2000
					});
				})
			},
			goodsinfoimage(){
				this.positionTop.push(0)
				this.positionTop.push(this.$refs.detailparaminfo.$el.offsetTop)
				this.positionTop.push(this.$refs.detailcommentinfo.$el.offsetTop)
			    this.positionTop.push(this.$refs.goodslist.$el.offsetTop)
			},
			NavBarIndex(index){
				this.$nextTick(function(){
					this.scrollTop=this.positionTop[index]
				})
			},
			scrollY(e){
				this.backTopShow=e.detail.scrollTop>=200
				this.old.scrollTop=e.detail.scrollTop				
				 if(e.detail.scrollTop>=this.positionTop[0]&&e.detail.scrollTop<this.positionTop[1])
				 {
					 this.$refs.goodsnavbar.currentIndex=0
				 }else if(e.detail.scrollTop>=this.positionTop[1]&&e.detail.scrollTop<this.positionTop[2]){
					 this.$refs.goodsnavbar.currentIndex=1
				 }else if(e.detail.scrollTop>=this.positionTop[2]&&e.detail.scrollTop<this.positionTop[3]){
					 this.$refs.goodsnavbar.currentIndex=2
				 }else if(e.detail.scrollTop>=this.positionTop[3]){
					 this.$refs.goodsnavbar.currentIndex=3
				 }
			},
			goTop(){
				this.scrollTop=this.old.scrollTop
				this.$nextTick(function(){
					this.scrollTop=0
				})
			}
		},
		onReady() {
		},
		onLoad(e){
			this.iid=e.iid
			uni.request({
				url:'http://123.207.32.32:7888/api/hy66/detail/',
				data:{
					iid:e.iid
				},
				success:(res)=>{
					this.topImages=res.data.result.itemInfo.topImages
					this.goods=new Goods(res.data.result.itemInfo,res.data.result.columns,res.data.result.shopInfo.services)
					this.shop=new Shop(res.data.result.shopInfo)
					this.detailInfo=res.data.result.detailInfo
					this.goodsParam=new GoodsParam(res.data.result.itemParams.info,res.data.result.itemParams.rule)
					if(res.data.result.rate.cRate!==0){
						this.commentInfo=res.data.result.rate.list[0]
					}
				}
			})
			uni.request({
				url:'http://123.207.32.32:7888/api/hy66/recommend',
				success:(res)=>{
					this.detailRecommend=res.data.data.list
				}
			})
		}
	}
</script>

<style scoped>
	.goodsnavbar{
		position: fixed;
		left: 0;
		right: 0;
		top: 88rpx;
		z-index: 3;
		background: #ffffff;
	}
	.scrollview{
		margin-top: 88rpx;
		height: 1158rpx;
	}
</style>
